<template>
  <div class = 'main'>
    <div class = "back" style="display: flex;">
      <router-link to="/" >
        <i class="el-icon-back" @click="" style="font-size: 40px;"></i>
      </router-link>
    </div>
    <Usertop ></Usertop>
<!--    <router-link to="/fanyi"><button>翻译页</button></router-link>-->
    <div class="block_wrapper" >
      <div class="block_inner" style="box-shadow: 0 0 10px rgba(0, 0,0,0.1)">
        <router-link to="/fanyi" style="" class="block">
          <div >
            <div class="block_content">
              <i class="el-icon-search" style="font-size: 70px;color: rgb(70,128,243)"></i>
              <span>翻译</span>
            </div>
          </div>
        </router-link>
        <router-link to="/see" class="block">
          <div class="">
            <div class="block_content">
              <i class="el-icon-chat-dot-square" style="font-size: 70px;color: rgb(70,128,243)"></i>
              <span>查看</span>
            </div>
          </div>
        </router-link>

        <router-link to="/myreview" class="block">
          <div class="">
            <div class="block_content">
              <i class="el-icon-view" style="font-size: 70px;color: rgb(70,128,243)"></i>
              <span>背诵</span>
            </div>
          </div>
        </router-link>

        <router-link to="/static" class="block">
          <div class="">
            <div class="block_content">
              <i class="el-icon-s-data" style="font-size: 70px;color: rgb(70,128,243)"></i>
              <span>统计</span>
            </div>
          </div>
        </router-link>

      </div>
    </div>
    <div class="add_icon_wrapper" >
      <div class="add_icon_inner" style="margin-top: 20px;">
          <div class = "el-icon-circle-plus home_addicon" @click="show_int++"></div>
      </div>
    </div>
    <AddWord :show_int="show_int" :hide_input="false"></AddWord>
  </div>
</template>

<script>
  import AddWord from "../addword/AddWord";
  import Usertop from "../usertop/Usertop";
  import Trans from '../trans/Trans'
  import {getRequest, postRequest} from "../../utils/api";
  import { mapGetters, mapState } from 'vuex'
  import {strsutils} from "../../utils/strutils";
  let baseurl = strsutils.baseurl
  export default {
    name: "home",
    data(){
        return {
          word: 'love',
          result: '',
          show_int: 0
        }
    },
    mounted() {
      console.debug("mount")
    },
    methods:{
      search(){
        let _this = this
        getRequest('/api1/translate?&doctype=json&type=AUTO&i='+this.word, '')
        .then(function (res) {
          // console.debug(res)
          _this.result = res.data.translateResult[0][0].tgt
        }).catch(function (err) {
          console.debug(err)
        })
      }
    },
    computed:{
      ...mapState(['count', 'username', 'userid']),
      ...mapGetters({asd:'inc_inc'})
    },
    components: {
      Trans, Usertop,AddWord
    }
  }
</script>
<style>
  .home_vue .el-input__inner{
    border-radius: 50px;
  }
  a{
    text-decoration: none;display: block;
  }
  .trans_dialog .el-dialog{width: 80%;color: red;max-width: 600px;}
</style>

<style scoped>
  .home_addicon{transition: all 0.3s;font-size: 50px;color: #2473fc}
  .home_addicon:active {color: #2c3e50; font-size: 70px;}
  .search_wrapper{
  display: flex;max-width: 600px;margin: 10px auto;
}
  .block_wrapper{margin-top: 20px;}
  .block_inner{display: flex;flex-wrap: wrap;margin: 0 auto;max-width: 500px;}
  .block{width: 40%;height: 150px;box-shadow: 0 0 12px rgba(0,0,0,0.2);margin: 5%;display: inline-block;}
  .block_content{width: 90px;height:90px;margin: 28px auto;}
  .block_content span{margin-top: 15px;display: inline-block}
</style>
